<template>
  <header class="header">
    <!-- 头部的第一行 -->
    <div class="top">
      <div class="container">
        <div class="loginList">
          <p>尚品汇欢迎您！</p>
          <p>
            <span>请</span>
            <!-- // ? 问题：vue路由能否使用a标签进行路由的跳转？ -->
            <!-- // a可以跳转，但限于hash模式 -->
            <!-- 路由跳转的模式：声明式，编码式 -->
            <router-link to="/login">登录</router-link>
            <router-link to="/register" class="register">免费注册</router-link>
          </p>
        </div>
        <div class="typeList">
          <a href="###">我的订单</a>
          <a href="###">我的购物车</a>
          <a href="###">我的尚品汇</a>
          <a href="###">尚品汇会员</a>
          <a href="###">企业采购</a>
          <a href="###">关注尚品汇</a>
          <a href="###">合作招商</a>
          <a href="###">商家后台</a>
        </div>
      </div>
    </div>
    <!--头部第二行 搜索区域-->
    <div class="bottom">
      <h1 class="logoArea">
        <router-link class="logo" title="尚品汇" to="/">
          <img src="@/assets/images/logo.png" alt="" />
        </router-link>
      </h1>
      <div class="searchArea">
        <form action="###" class="searchForm">
          <input
            type="text"
            id="autocomplete"
            class="input-error input-xxlarge"
            v-model="keyword"
          />
          <button
            class="sui-btn btn-xlarge btn-danger"
            type="button"
            @click="toSearch"
          >
            搜索
          </button>
        </form>
      </div>
    </div>
  </header>
</template>

<script>
export default {
  name: "Header",
  data() {
    return {
      keyword: "",
    };
  },
  methods: {
    toSearch() {
      // URL的参数类型主要包括params、query、hash
      // 1.params参数，设参在路由、传参在链接、接参用参在组件
      // 2.query参数，设参传参在链接，接参用参在组件
      // ? 参数传递的方式有哪些？
      // 1.字符串拼接类型
      // this.$router.push(
      //   "/search/" + this.keyword + "?keyword1=" + this.keyword.toUpperCase()
      // );
      // 2.模板字符串
      // this.$router.push(
      //   `/search/${this.keyword}?keyword1=${this.keyword.toUpperCase()}`
      // );
      // 3.对象模式
      // @ path与params不能共用，因为会造成params丢失
      // ! 命名路由导航
      // error
      // this.$router.push({
      //   params: {
      //     keyword: this.keyword,
      //   },
      //   query: {
      //     keyword1: this.keyword.toUpperCase(),
      //   },
      //   path: "/search",
      // });
      // right
      this.$router.push({
        params: {
          keyword: this.keyword || undefined,
        },
        query: {
          keyword1: this.keyword.toUpperCase(),
        },
        name: "Search",
      });
    },
  },
  mounted() {
    this.$bus.$on("clearKeyword", () => {
      this.keyword = "";
    });
  },
};
</script>

<style></style>
